<template>
  <div class="list">
      <Breadcrumb></Breadcrumb>
      <div class="head">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="预定编号">
                  <el-input placeholder="填写编号" ref="pnameInput"></el-input>
                </el-form-item>
                <el-form-item label="预定时间">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">查询</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div class="managegoods">
          <el-row>
            <el-button type="warning" size="small" icon="el-icon-download">导出</el-button>
          </el-row>
        </div>
    </div>
    <div class="table">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
         
          border>
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="orderNum"
            label="汇总单编号"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="operator"
            label="汇总人"
            width="120">
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="phone"
            label="联系电话"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            align="center"
            header-align="center"
            width="200"
            label="汇总时间"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ moment(scope.row.time).format('YYYY-MM-DD HH:mm:ss') }}</template>
          </el-table-column>
           <el-table-column
            align="center"
            header-align="center"
            prop="totalPrice"
            label="汇总单总价格"
            show-overflow-tooltip>
          </el-table-column >
          <el-table-column label="操作" align="center" header-align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)" type="danger">撤销汇总</el-button>
            </template>
          </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :total="total" :layout="layout" :pageSize="pagesize" @getPageIndex="getPageIndex"></Pagination>
    </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Pagination from '@/components/Pagination' 
export default {
    components:{
      Pagination
    },
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        total:1,
        pagesize:8,
        current:1,
        layout:'total,prev, pager, next'
      }
    },
    created(){
      this.getCollectOrderList(1);
    },
    methods: {
      moment,
      handleEdit(index, row){
        console.log(index,row);
         this.$confirm('即将撤销该条汇总记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {

          this.$api.cancelOrderCollect({id:row.id}).then((res)=>{
            if(res.data.status===200){
              this.getCollectOrderList(this.current);
             this.$message({
              message: '撤销成功',
              type: 'success'
            })
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });
        });
      },
      

      getPageIndex(current){
        console.log('222',current);
        this.current=current;
        this.getCollectOrderList(current);
      },

      async getCollectOrderList(page=1){
        let res=await this.$api.getOrderCollect({page});
        console.log('汇总订单列表',res);
        if(res.data.status===200){
          this.tableData=res.data.data;
          this.total=res.data.total;
          this.pagesize=res.data.pageSize;
        }else{
          this.total=1;
          this.pagesize=8;
          this.tableData=[];
        }
      },

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(selection) {
        this.multipleSelection=selection;
        // console.log(this.multipleSelection);
        console.log(this.multipleSelection);
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-row-class{
    // text-align: center;
    color:#000;
  }
  .head{
    margin:15px;
    padding:15px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .search{
      
      border-bottom: 2px solid #ccc;
    }
    .managegoods{
      padding-top: 15px;
    }
  }
  .table{
    margin: 0 15px;
    .ptitle{
      // color:#000;
      cursor:pointer;
    }
    .ptitle:hover{
      color:rgb(7, 60, 135);
    }
  }
  .pagination{
    margin: 0 15px;
    position: fixed;
    // bottom:10px;
    bottom:15px;
    right:0;
    background-color: transparent;
  }
</style>